<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <script src="../js/vue-3.2.26.js"></script>
</head>
<body>
<div id="app">
  <!-- 为true时显示 -->
  <p v-if="true">为true时显示</p>
  <!-- 为false时不显示 -->
  <p v-if="false">为false时不显示</p>
  <!-- 也可以传入变量，为true时显示 -->
  <p v-if="isShow">也可以传入变量，为true时显示</p>
  <!-- 当上一个v-if为false时，显示v-else -->
  <p v-else>当上一个v-if为false时，显示v-else</p>
  <hr>
  <!-- 当使用v-show，为false时，也会隐藏，只不过只改变了样式style="display: none;" -->
  <!-- 当使用v-if，为false时，会完全删除 -->
  <!-- 当频繁切换时，使用v-show -->
  <!-- 但是v-if使用频率更高 -->
  <p v-show="isShow">当频繁切换时，使用v-show</p>
  <p v-show="!isShow">当频繁切换时，使用v-show</p>
  <hr>
  <!-- v-else-if上一个条件不满足，还要满足一个条件时显示 -->
  <p v-if="score>=90">优秀</p>
  <p v-else-if="score>=80">良好</p>
  <p v-else-if="score>=70">中等</p>
  <p v-else-if="score>=60">及格</p>
  <p v-else>不及格</p>
  <!-- 最好不要使用v-else-if，推荐放到computed里面 -->
  <p>{{grade}}</p>
  <hr>
  <!-- 切换登录方式案例 -->
  <span v-if="isAccount">
            <label for="login_account">账号登录</label>
            <input type="text" name="login_account" id="login_account" placeholder="请输入账号">
        </span>
  <span v-else>
            <label for="login_email">邮箱登录</label>
            <input type="text" name="login_email" id="login_email" placeholder="请输入邮箱">
        </span>
  <br>
  <button @click="isAccount=!isAccount">切换登录方式</button>
</div>
</body>
<script>
  const App = {
    data() {
      return {
        isShow: false,
        score: 87,
        isAccount: true,
      }
    },
    computed: {
      grade() {
        if (this.score >= 90) {
          return '优秀';
        } else if (this.score >= 80) {
          return '良好';
        } else if (this.score >= 70) {
          return '中等';
        } else if (this.score >= 60) {
          return '及格';
        } else {
          return '不及格';
        }
      }
    },
  }
  const app = Vue.createApp(App).mount("#app");
</script>
</html>
